<section class="vbox" style="height:2000px">
  <section>
    <section class="hbox stretch">
      <!-- /.aside -->
      <section id="content">
        <section class="vbox">
          <section class="scrollable padder">
            <div class="m-b-md">
              <h3 class="m-b-none"></h3>
            </div>
            <div class="row">
              <div class="col-sm-12 padder-md">
                <form
                  (ngSubmit)="onSubmit()" #addProjectStepForm="ngForm"
                  data-validate="parsley">
                  <section class="panel panel-default">
                    <header class="panel-heading">
                      <span class="h4">项目信息添加</span>
                    </header>
                    <div class="panel-body">
                      <p class="text-muted">请完善下面信息</p>
                      <div class="form-group">
                        <label>步骤标题</label>
                        <input type="text"
                               [(ngModel)]="projectStep.title" name="title"             #title="ngModel"
                               class="form-control" placeholder="请填写标题" data-required="true">
                        <div [hidden]="title.valid || title.pristine"
                             class="alert alert-danger"></div>
                      </div>

                      <div class="form-group pull-in clearfix">
                        <div class="col-sm-12">
                          <div class="form-group">
                            <label>简单描述项目，便于他人理解</label>
                            <div class="btn-toolbar m-b-sm btn-editor" data-role="editor-toolbar" data-target="#editor">
                              <div class="btn-group">
                                <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                </ul>
                              </div>
                              <div class="btn-group">
                                <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                  <li><a data-edit="fontSize 5" style="font-size:24px">Huge</a></li>
                                  <li><a data-edit="fontSize 3" style="font-size:18px">Normal</a></li>
                                  <li><a data-edit="fontSize 1" style="font-size:14px">Small</a></li>
                                </ul>
                              </div>
                              <div class="btn-group">
                                <a class="btn btn-default btn-sm" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
                              </div>
                              <div class="btn-group">
                                <a class="btn btn-default btn-sm" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
                              </div>
                              <div class="btn-group">
                                <a class="btn btn-default btn-sm" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
                              </div>
                              <div class="btn-group">
                                <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
                                <div class="dropdown-menu">
                                  <div class="input-group m-l-xs m-r-xs">
                                    <input class="form-control input-sm" placeholder="URL" type="text" data-edit="createLink"/>
                                    <div class="input-group-btn">
                                      <button class="btn btn-default btn-sm" type="button">Add</button>
                                    </div>
                                  </div>
                                </div>
                                <a class="btn btn-default btn-sm" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
                              </div>

                              <div class="btn-group">
                                <a class="btn btn-default btn-sm" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>

                                <input id="picture-select" type="file" data-role="magic-overlay"  ng2FileSelect [uploader]="uploader"  (change)="selectedFileOnChanged()"  data-target="#pictureBtn"

                                       data-role="magic-overlay"   style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 41px; height: 30px;"
                                       data-edit="insertImage" />

                              </div>
                              <div class="btn-group">
                                <a class="btn btn-default btn-sm" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
                                <a class="btn btn-default btn-sm" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
                              </div>
                            </div>
                            <div id="myeditor" #myeditor class="form-control" style="overflow:scroll;height:300px;max-height:300px">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="line line-dashed b-b line-lg pull-in"></div>
                      <div class="form-group text-right">

                        <button type="reset" class="btn btn-default">取消</button>
                        <button type="submit" class="btn btn-primary"
                                [disabled]="!addProjectStepForm.form.valid">保存</button>

                      </div>
                    </div>
                    <footer class="panel-footer text-right bg-light lter">

                    </footer>
                  </section>
                </form>
              </div>
            </div>
          </section>
        </section>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
      </section>
    </section>
  </section>
</section>
